<div class="card-block">
  <div class="card-title">
    <app-name [name]="research.name"
              [unlimited]="research.unlimited"
              [quantity]="research.quantity"></app-name>
  </div>
  <div class="card-text p">
    {{research.description}}
    <br />
    <div *ngIf="!research.complete">
      <span>花费: </span>
      <app-price-line *ngFor="let price of research.prices; trackBy:getPriceId"
                      [unit]="price.base"
                      [canBuy]="price.canBuy"
                      [price]="price.priceUser">
      </app-price-line>

      <div *ngIf="research.unlimited ">
        <label for="max">最高等级:</label>
        <input type="number"
               id="max"
               class="clr-input"
               [(ngModel)]="research.maxAutoBuyLevel"
               (change)="ms.game.researches.reloadLists()"
               min="0"
               size="3">
      </div>

    </div>
  </div>
</div>
<div class="card-footer"
     *ngIf="!research.complete">
  <button *ngIf="!research.canBuy && !canSkip"
          class="btn btn-sm btn-link"
          disabled>
    不能购买. 距离可购买还有 {{research.availableIn | endIn}} 
  </button>
  <button *ngIf="!research.canBuy &&  canSkip"
          class="btn btn-primary btn-sm"
          (click)="skip()">
    不能购买. 跳过 {{minuteSkip}} 分钟
  </button>
  <button *ngIf="research.canBuy"
          class="btn btn-sm btn-link"
          (click)="research.buy(research.realNum)">
    研究
  </button>
</div>
